<template>
	<view class="work-container">
		<view class="work-content">
			<view class="page-title">
				{{ pageTitle }}
			</view>
			<view class="page-subtitle">求职意向不同，我们给您推荐不一样的职位</view>
			<view class="add-work">
				<view class="add-work-head flex" v-if="!addFlag">
					<view class="head-text">
						求职意向
					</view>
					<view class="head-count">
						{{ workList.length }}/3
					</view>
				</view>
				<view class="work-list">
					<view class="resume-form" v-if="addFlag">
						<view class="resume-form-item">
							<view class="sub-title">意向职位</view>
							<view class="item-content" @tap="handleSelectType">
								<text class="label-text" v-if="stationParams.stationType" style="color: #34314F;">{{ stationParams.stationName }}</text>
								<text class="label-text" v-else>请选择意向职位</text>
								<view class="right-arrow"></view>
							</view>
						</view>
						<view class="resume-form-item">
							<view class="sub-title">工作地点</view>
							<view class="item-content">
								<text class="label" v-if="stationParams.stationAddr" style="color: #34314F;">{{ stationParams.stationAddr }}</text>
								<text class="label" v-else>请选择意向工作地点</text>
								<picker :value="addressIndex" :range="addressList" @change="handleChangeAddressIndex">
									<input class="input-text select" disabled
										type="text" readonly>
								</picker>
							</view>
						</view>
						<view class="resume-form-item range">
							<text class="sub-title">薪资范畴</text>
							<view class="labels">
								<input type="number" v-model="startSalary">
								<text class="sprate">至</text>
								<input type="number" v-model="endSalary">
							</view>
						</view>
					</view>
					<view class="add-work-list" v-else>
						<view class="work-item-wrap" v-for="item in workList" :key="item.id" @tap="handleEditWork(item)">
							<view>
								<view class="work-info" style="margin-bottom: 8rpx;">
									<text>{{ '[' + item.stationAddr + '] ' }}</text>
									<text>{{ item.stationName }}</text>
								</view>
								<text class="salaryRange">{{ item.salaryRange }}</text>
							</view>
							<view class="right-arrow"></view>
						</view>
						<view class="work-btn-wrap" v-if="workList.length < 3">
							<view class="add-work-btn flex" @tap="handleAddWork">
								<view class="add-btn"></view>
								<view>添加求职期望</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		</view>
		<view class="submit-btn" @tap="handleSubmit" v-if="addFlag && !editFlag">
			<button class="save-btn">保存</button>
		</view>
		
		<view class="add-form-btn" v-if="editFlag">
			<button class="delete-btn" @tap="handleDelete" >删除</button>
			<button class="save-btn" @tap="handleSubmit" >保存</button>
		</view>
	</view>
</template>

<script>
	// import popupLayer from '@/components/popupLayer/index.vue'
	import {
		intention,
		delIntention,
		intentionList
	} from '@/common/api_employment.js'
	
	export default {
		components: {
			// popupLayer
		},
		data() {
			return {
				stationIndex: -1,
				addressIndex: -1,
				stationList: ['前端开发', 'java开发'],
				addressList: ['全黄石', '黄石港区', '西塞山区', '大冶湖高新区', '下陆区', '开铁区', '阳新县', '大冶市' ],
				stationParams: {
					stationType: '',
					stationName: '',
					stationAddr: '',
					salaryRange: ''
				},
				startSalary: '',
				endSalary: '',
				workList: [],
				stationId: '',
				addFlag: false,
				editFlag: false
			}
		},
		onLoad(option) {
			console.log(option, 'options');
			if (option.id) {
				this.addFlag = true
				this.stationParams.stationType = option.id
				this.stationParams.stationName = option.typeName
			}
			if (option.itemId) {
				this.stationParams.id = option.itemId
			}
			this.getStationList()
		},
		computed: {
			pageTitle() {
				if (!this.addFlag && !this.editFlag) {
					return '想找什么样的工作？'
				} else {
					return '添加求职意向'
				}
			}
		},
		methods: {
			
			handleAddWork() {
				// this.$refs.popupRef.show()
				this.addFlag = true
			},
			
			handleSelectType() {
				console.log(this.stationParams, 'this.stationParams')
				uni.navigateTo({
					url: `/subpage/talentemployment/employment/stationType?id=${this.stationParams.stationType}&itemId=${this.stationParams.id}`
				})
			},
			handleEditWork(item) {
				this.addFlag = true
				this.editFlag = true
				
				this.stationParams = item
				this.startSalary = item.salaryRange.split('-')[0]
				this.endSalary = item.salaryRange.split('-')[1]
				
				console.log(item, 'handleEditWork')
			},
			handleChangeStationIndex(e) {
				this.stationIndex = e.detail.value
				this.stationParams.stationType = this.stationList[this.stationIndex]
			},
			handleChangeAddressIndex(e) {
				this.addressIndex = e.detail.value
				this.stationParams.stationAddr = this.addressList[this.addressIndex]
			},
			async handleSubmit() {
				if (this.startSalary && this.endSalary) {
					this.stationParams.salaryRange = this.startSalary + '-' + this.endSalary
				}
				
				// 过滤掉id为"undefined"的情况
				const params = { ...this.stationParams }
				if (params.id === "undefined" || params.id === undefined) {
					delete params.id
				}
				
				const res = await intention(params)
				if(res.code === 200) {
					this.addFlag = false
					this.editFlag = false
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					})
					this.resetForm()
					this.getStationList()
				}
			},
			async handleDelete() {
				const res = await delIntention(this.stationParams.id)
				if(res.code === 200) {
					this.addFlag = false
					this.editFlag = false
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					})
					this.resetForm()
					this.getStationList()
				}
			},
			async getStationList() {
				const res = await intentionList()
				if(res.code === 200) {
					// this.addFlag = false
					this.workList = res.data
				}
			},
			resetForm() {
				for (var key in this.stationParams) {
					if (this.stationParams.hasOwnProperty(key)) {
						this.stationParams[key] = ''
					}
				}
				this.startSalary = ''
				this.endSalary = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-container {
		width: 100%;
		min-height: 100vh;
		background: #F2F5FF;
		box-sizing: border-box;

		.work-content {
			position: relative;
			width: 100%;
			min-height: 100vh;
			padding: 50rpx 32rpx 32rpx;
			box-sizing: border-box;
		}

		.page-title {
			margin-bottom: 8rpx;
			font-weight: 600;
			font-size: 18px;
			color: #34314F;
			line-height: 25px;
			text-align: left;
			font-style: normal;
		}

		.page-subtitle {
			margin-bottom: 14px;
			font-weight: 400;
			font-size: 13px;
			color: #34314F;
			line-height: 22px;
			text-align: left;
			font-style: normal;
		}

		.add-work {
			position: relative;
			width: 100%;
			// height: 256px;
			padding: 36rpx 32rpx 46rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			box-sizing: border-box;

			.add-work-head {
				// margin-bottom: 48rpx;
				justify-content: space-between;
			}

			.head-text {

				font-weight: 600;
				font-size: 16px;
				color: #34314F;
				line-height: 22px;
				text-align: left;
				font-style: normal;

				&::after {
					position: absolute;
					width: 3px;
					height: 14px;
					background: #FFDE6D;
					border-radius: 2px;
					top: 46rpx;
					left: 0;
					content: '';
				}
			}

			.head-count {
				font-weight: 400;
				font-size: 16px;
				color: #34314F;
				line-height: 22px;
				text-align: center;
			}

			.work-list {
				.resume-form {
					width: 100%;
					// padding: 18rpx 46rpx 36rpx;
					background: #FFFFFF;
					// border-radius: 20px;
					box-sizing: border-box;

					.resume-form-item {

						padding: 20rpx 0 20rpx 0;
						border-bottom: 2rpx solid rgba(52, 49, 79, 0.08);

						.sub-title {
							margin-bottom: 8rpx;
							font-weight: 400;
							font-size: 12px;
							color: rgba(52, 49, 79, 0.4);
							line-height: 17px;
							text-align: left;
							font-style: normal;
						}
						
						&.range {
							border-bottom: 0;
						}

						.item-content {
							position: relative;
							// display: flex;
							// justify-content: space-between;
							width: 100%;
							height: 100%;
							
							.label {
								position: absolute;
								left: 0;
								display: block;
								font-weight: 400;
								font-size: 28rpx;
								color: rgba(52, 49, 79, 0.7);
								line-height: 20px;
							}
							.label-text {
								font-weight: 400;
								font-size: 28rpx;
								color: rgba(52, 49, 79, 0.7);
								line-height: 20px;
							}
							
							
							
							::v-deep .input-text select {
								width: 100%;
							}
						}

						&.introduct {
							display: block;
							position: relative;
						}

						
						
						.labels {
							display: flex;
							flex-wrap: nowrap;
							margin-top: 8rpx;
						
							.popup-label {
								display: block;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #34314F;
								padding: 18rpx;
								border-radius: 16rpx;
								border: 1px solid rgba(52, 49, 79, 0.13);
						
								&.active {
									color: #FF7F1C;
									border: 1px solid #FF7F1C;
									background: rgba(255, 127, 28, 0.08);
								}
							}
						
							input {
								width: 270rpx;
								height: 76rpx;
								border-radius: 16rpx;
								text-align: center;
								border: 1px solid rgba(52, 49, 79, 0.13);
							}
						
							.sprate {
								font-size: 28rpx;
								color: #34314F;
								line-height: 76rpx;
								margin: 0 20rpx;
							}
						}

						.label-tip {
							font-weight: 400;
							font-size: 26rpx;
							color: rgba(52, 49, 79, 0.7);
							line-height: 18px;
							text-align: left;
						}

						.input-text {
							position: relative;
							text-align: right;
							font-size: 26rpx;

							&.select {
								padding-right: 40rpx;
							}

							&.select::after {
								position: absolute;
								top: 50%;
								right: 0;
								display: block;
								width: 32rpx;
								height: 32rpx;
								transform: translateY(-50%);
								background: url('@/static/images/index/right-arrow.png') no-repeat center;
								background-size: 100% 100%;
								content: '';
							}
						}

						.textarea-text {
							width: 100%;
							height: 440rpx;
							padding: 24rpx 0;
							box-sizing: border-box;
							font-size: 26rpx;
						}

						.count {
							position: absolute;
							bottom: 16rpx;
							right: 20rpx;
							font-size: 24rpx;
							color: rgba(52, 49, 79, 0.4);
						}

						// .add-btn {
						// 	width: 40rpx;
						// 	height: 40rpx;
						// 	background: url('@/static/images/more.png') no-repeat center;
						// 	background-size: 100% 100%;
						// }
					}

				}
				
				.work-item-wrap {
					position: relative;
					padding: 20rpx 0;
					border-bottom: 2rpx solid rgba(52, 49, 79, 0.08);
					
					.work-info {
						text {
							font-weight: 400;
							font-size: 14px;
							color: #34314F;
							line-height: 20px;
							text-align: left;
							font-style: normal;
						}
					}
					.salaryRange {
						font-weight: 400;
						font-size: 13px;
						color: rgba(52, 49, 79, 0.7);
						line-height: 18px;
						text-align: left;
						font-style: normal;
					}
				}
				
				.right-arrow {
					position: absolute;
					top: 50%;
					right: 0rpx;
					display: block;
					width: 32rpx;
					height: 32rpx;
					transform: translateY(-50%);
					background: url('@/static/images/index/right-arrow.png') no-repeat center;
					background-size: 100% 100%;
				}

				.work-btn-wrap {
					display: flex;
					justify-content: center;
					margin-top: 50rpx;
				}

				.add-work-btn {
					justify-content: center;
					width: 150px;
					height: 36px;
					background: #F7F7F7;
					border-radius: 18px;
					border: 1px solid #ECECEC;
					font-weight: 600;
					font-size: 14px;
					color: #34314F;
					line-height: 36px;
					font-style: normal;
					box-sizing: border-box;
				}

				.add-btn {
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
					margin-right: 12rpx;
					background: url('@/static/images/more.png') no-repeat center;
					background-size: 100% 100%;
				}
			}
		}

		.submit-btn {
			position: absolute;
			width: calc(100% - 32rpx);
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
		
			button {
				height: 48px;
				font-weight: 600;
				font-size: 32rpx;
				color: #34314F;
				line-height: 48px;
				text-align: center;
				font-style: normal;
				background: #FFDE6D;
				border-radius: 20px;
		
				&::after {
					border: 0;
				}
			}
		}
		
		
		.add-form-btn {
			// position: absolute;
			// bottom: 40rpx;
			// left: 32rpx;
			position: absolute;
			display: flex;
			width: 100%;
			bottom: 40rpx;
			
			button {
				font-weight: 600;
				font-size: 32rpx;
				color: #34314F;
				line-height: 96rpx;
				text-align: center;
				border-radius: 20px;
				&::after {
					border: 0;
				}
			}
			.delete-btn {
				width: 268rpx;
				height: 96rpx;
				background-color: rgba(52, 49, 79, 0.06);
			}
			.save-btn {
				width: 408rpx;
				height: 96rpx;
				margin-left: 28rpx;
				background: #FFDE6D;
			}
		}
		
		.popup-content {
			width: 100%;
			height: 600px;
			border-radius: 20px;
			box-sizing: border-box;
			overflow-y: auto;

			.popup-content-wrap {
				// position: fixed;
				height: 600px;
				overflow-y: auto;
				padding: 50rpx 32rpx 40rpx 32rpx;
				box-sizing: border-box;
				width: 100%;
				box-sizing: border-box;
			}

			.popup-item {
				margin-bottom: 28rpx;

				&.range {
					padding-bottom: 80px;
				}

				.popup-subtitle {
					display: block;
					margin-bottom: 24rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
					text-align: left;
					font-style: normal
				}

				.labels {
					display: flex;
					flex-wrap: wrap;

					.popup-label {
						display: block;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						padding: 18rpx;
						border-radius: 16rpx;
						border: 1px solid rgba(52, 49, 79, 0.13);

						&.active {
							color: #FF7F1C;
							border: 1px solid #FF7F1C;
							background: rgba(255, 127, 28, 0.08);
						}
					}

					input {
						width: 200rpx;
						height: 76rpx;
						border-radius: 16rpx;
						text-align: center;
						border: 1px solid rgba(52, 49, 79, 0.13);
					}

					.sprate {
						font-size: 28rpx;
						color: #34314F;
						line-height: 76rpx;
						margin: 0 20rpx;
					}
				}

			}

			.popup-footer {
				position: fixed;
				bottom: 20rpx;
				left: 0;
				width: 100%;
				display: flex;
				padding-top: 30rpx;
				background-color: #fff;
				justify-content: space-around;
				z-index: 999;

				.reset-btn {
					margin-right: 32rpx;
					background-color: rgba(52, 49, 79, 0.06);
				}

				.submit-btn {
					background-color: rgba(255, 222, 109, 1);
				}

				button {
					width: 268rpx;
					height: 96rpx;
					border-radius: 40rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;

					&::after {
						border: 0;
					}
				}
			}
		}

	}
</style>